import React, { CSSProperties } from 'react'
import rightSvg from 'src/static/svg/charts/seach_right.svg'
import leftSvg from 'src/static/svg/charts/search_left.svg'
import style from './style.module.scss'
import QueueAnim from 'rc-queue-anim'

interface JumbotronProps {
    title: string;
    subTitle?: string;
    style?: CSSProperties;
    space?: 'normal' | 'small';
}

interface JumbotronState {

}

const JUMBOTRON_TITLE_STYLE_MAP = {
    normal: `${style.jumbotronTitle}`,
    small: `${style.jumbotronTitle} ${style.smallSpacing}`
}

const JUMBOTRON_SUB_TITLE_STYLE_MAP = {
    normal: `${style.jumbotronSubTitle}`,
    small: `${style.jumbotronSubTitle} ${style.smallSpacing}`
}

const JumbotronBackground = (): React.ReactElement => (
    <div>
        <img src={rightSvg} alt="RightSVG" className={style.rightSVG}/>
        <img src={leftSvg} alt="LeftSVG" className={style.leftSVG}/>
    </div>
)

export class Jumbotron extends React.Component<JumbotronProps, JumbotronState> {
    render () {
        return (
            <div style={this.props.style} className={style.defaultJumbotron}>
                <div className={style.jumbotronTitleBox}>
                    <QueueAnim delay={500}>
                        <h2 key={'title'}
                            className={this.props.space === undefined ? JUMBOTRON_TITLE_STYLE_MAP.normal
                                : JUMBOTRON_TITLE_STYLE_MAP[this.props.space]}>
                            {this.props.title}
                        </h2>
                        {this.props.subTitle
                            ? <h3 className={this.props.space === undefined ? JUMBOTRON_SUB_TITLE_STYLE_MAP.normal
                                : JUMBOTRON_SUB_TITLE_STYLE_MAP[this.props.space]}
                            key={'subTitle'}>{this.props.subTitle}</h3> : null}
                    </QueueAnim>
                </div>
                <JumbotronBackground/>
            </div>
        )
    }
}
